<!--评论管理 -->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >KTV管理</el-breadcrumb-item>
        <el-breadcrumb-item >评论详情</el-breadcrumb-item>
        <div v-if="this.$store.state.login.user.type == 1" style="text-align: right" >
          <span style="color: red">请选择KTV</span>
          <el-select v-model="$store.state.login.shopID" clearable  @change="SelectShop()" placeholder="请选择KTV查询">
            <el-option
              v-for="item in $store.state.login.shopData"
              :key="item.shop_id"
              :label="item.name"
              :value="item.shop_id">
            </el-option>
          </el-select>
        </div>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <el-row  style="min-height: 40px">
          <el-col  style="margin-bottom: 5px;display: flex" align="left">
            <el-input v-model="key" clearable style="width: 200px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getstart()">搜索</el-button>
            </el-input>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="评论内容">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                trigger="click">
                <div style="max-width: 300px;max-height: 300px;overflow-y: auto">{{scope.row.content}}</div>
                <div slot="reference" style="width: 100%;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                  {{scope.row.content}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="label"
            label="评论标签"
            width="160">
            <template slot-scope="scope">
              <div v-if="scope.row.label && scope.row.label !== null">
                <el-tag
                  v-for="tag in scope.row.label.split(',')"
                  style="margin-right: 5px;margin-bottom: 5px;"
                  :key="tag">
                  {{tag}}
                </el-tag>
              </div>

            </template>
          </el-table-column>
          <el-table-column
            prop="admin_state"
            width="200"
            label="评论星级">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.grade"
                disabled
                show-score
                :colors="colors">
              </el-rate>
            </template>
          </el-table-column>
          <el-table-column
            label="评论图片">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.imgurl"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.imgurl.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <img slot="reference" :src="scope.row.imgurl.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.imgurl">无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="reply_content"
            label="店铺回复内容">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                trigger="click">
                <div style="max-width: 300px;max-height: 300px;overflow-y: auto">{{scope.row.reply_content}}</div>
                <div slot="reference" style="width: 100%;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                  {{scope.row.reply_content}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="评论时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.addtime)}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="changeMes(scope.row.id)" style="" size="small" type="text">
                回复
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-dialog title="回复" :visible.sync="replyVisible" width="50%" :modal-append-to-body="false">
      <el-input v-model="replyData.reply_content" type="textarea" placeholder="请输入回复内容"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitState">确 定</el-button>
        <el-button @click="replyVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "CommentManage",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      if (this.$store.state.login.user.type == 1) {
        this.shop_id = this.$store.state.login.shopID
      }else {
        this.shop_id = this.$store.state.login.user.id
      }
      this.getstart()
    },
    data() {
      return {
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        key:'',
        type:'',
        options: [
          {
            value: '1',
            label: '中小包'
          },
          {
            value: '2',
            label: '大包'
          },
          {
            value: '3',
            label: '豪包'
          },
        ],
        tableData:[{xj:5},{xj:2},],
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        replyVisible:false,
        replyData:{
          id:'',
          reply_content:'',
        },
        shop_id:'',
      }
    },
    methods: {
      SelectShop(){
        this.shop_id = this.$store.state.login.shopID
        this.getstart()
      },
      add(){
        this.$router.push({name:'addGoods'})
      },
      getstartSelect(){
        this.page = 1
        this.getstart()
      },
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          key:thi.key,
          shop_id:thi.shop_id,
        }
        thi.mySelectAll('commentListShop',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },
      //状态改变提示
      changeMes(id) {
        this.replyData.id = id
        this.replyVisible = true
      },
      submitState() {
        let thi = this
       if (thi.replyData.reply_content == ''){
         thi.$message.error('请输入回复内容')
         return
       }
        thi.mySubmit('commentReply', thi.replyData).then(function (code) {
          if (code == 200) {
            thi.replyVisible = false
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  select{
    border:none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand {
    display: none;
  }

  .txtCont {
    border: 1px solid #409eff;
    display: flex;
    align-items: center;
    border-radius: 5px;
    height: 40px;
    margin-bottom: 20px;
    width: 480px;
    float: left;
  }

  .slect-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;;
  }
</style>
